<!--
 * hi-elevator - 电梯导航
 *
 * @author 济南晨霜信息技术有限公司
 * @mobile 18560000860 / 18754137913
 -->
<template>
    <view class="page-view">
        <!-- 基础用法 -->
        <module-demo title="基础用法">
            <view class="demo-content">
                <hi-tabs class="tabs" :list="list1" :current="current1" @change="handleTabChange1" bg="#ffffff"></hi-tabs>
            </view>
        </module-demo>

        <!-- 显示图标 -->
        <module-demo title="显示图标">
            <view class="demo-content">
                <hi-tabs class="tabs" :list="list2" :current="current2" @change="handleTabChange2" bg="#ffffff"></hi-tabs>
            </view>
        </module-demo>

        <!-- 右侧内容 -->
        <module-demo title="右侧内容">
            <view class="demo-content">
                <hi-tabs class="tabs" :list="list1" :current="current1" @change="handleTabChange1" :right="rightItems" bg="#ffffff"></hi-tabs>
            </view>
        </module-demo>

        <!-- 取消自动滚动 -->
        <module-demo title="取消自动滚动">
            <view class="demo-content">
                <hi-tabs class="tabs" :list="list1" :current="current1" @change="handleTabChange1" :autoScroll="false" bg="#ffffff"></hi-tabs>
            </view>
        </module-demo>

        <!-- 等分布局 -->
        <module-demo title="等分布局">
            <view class="demo-content">
                <hi-tabs class="tabs" :list="list3" :current="current3" @change="handleTabChange3" equal bg="#ffffff"></hi-tabs>
            </view>
        </module-demo>

        <!-- 两端对齐 -->
        <module-demo title="两端对齐">
            <view class="demo-content">
                <hi-tabs class="tabs" :list="list3" :current="current3" @change="handleTabChange3" justify bg="#ffffff"></hi-tabs>
            </view>
        </module-demo>

        <!-- 纵向布局 -->
        <module-demo title="纵向布局">
            <view class="demo-content demo-content--column">
                <hi-tabs class="tabs tabs--column" :list="list4" :current="current4" @change="handleTabChange4" column bg="#ffffff"></hi-tabs>
            </view>
        </module-demo>
    </view>
</template>

<script setup>
    import { ref } from "vue";

    // tabs1
    const list1 = ref([
        { name: "热门" },
        { name: "数码" },
        { name: "美妆" },
        { name: "礼品卡" },
        { name: "百货" },
        { name: "家电" },
        { name: "手表" },
        { name: "配饰" },
        { name: "潮玩" },
        { name: "食品" },
        { name: "热门" },
        { name: "数码" },
        { name: "美妆" },
        { name: "礼品卡" },
        { name: "百货" },
        { name: "家电" },
        { name: "手表" },
        { name: "配饰" },
        { name: "潮玩" },
        { name: "食品" }
    ]);
    const current1 = ref(0);

    // tabs2
    const list2 = ref([
        { name: "热门", icon: "__shezhi" },
        { name: "数码", icon: "__loading" },
        { name: "美妆", icon: "__gonggao" },
        { name: "礼品卡", icon: "__gouwuche" },
        { name: "百货", icon: "__zhuye", disabled: true },
        { name: "家电", icon: "__rexiao" },
        { name: "手表", icon: "__xinpin" },
        { name: "配饰", icon: "__shanchu" },
        { name: "潮玩", icon: "__sousuo" },
        { name: "食品", icon: "__fuzhi" }
    ]);
    const current2 = ref(0);

    // tabs3
    const list3 = ref([{ name: "热门" }, { name: "数码" }, { name: "美妆" }, { name: "礼品卡" }, { name: "百货" }]);
    const current3 = ref(0);

    // tabs4
    const list4 = ref([
        { name: "热门" },
        { name: "数码" },
        { name: "美妆" },
        { name: "礼品卡" },
        { name: "百货" },
        { name: "家电" },
        { name: "手表" },
        { name: "配饰" },
        { name: "潮玩" },
        { name: "食品" }
    ]);
    const current4 = ref(0);

    // 右侧内容
    const rightItems = ref([
        { name: "公告", icon: "__gonggao" },
        { name: "设置", icon: "__shezhi" }
    ]);

    // 切换事件
    function handleTabChange1(item, index) {
        current1.value = index;
    }

    // 切换事件
    function handleTabChange2(item, index) {
        current2.value = index;
    }

    // 切换事件
    function handleTabChange3(item, index) {
        current3.value = index;
    }

    // 切换事件
    function handleTabChange4(item, index) {
        current4.value = index;
    }
</script>

<style lang="scss" scoped>
    .demo-content {
        width: 100%;

        &--column {
            width: auto;
            height: 250px;
        }
    }

    .hi-tabs.tabs {
        --hi-tabs-background: #ffffff;
        padding: 0 12px;

        &--column {
            padding: 0;
        }
    }
</style>
